<template>
  <div class="hello">
    姓名: {{ person.name }},年龄是：{{person.age }}

    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
  </div>
</template>

<script setup>
import { reactive ,toRefs,toRef} from 'vue'
let person = reactive({
  name: '张三',
  age: 20,
})

let {age, name} = toRefs(person)

let n1 = toRef(person, 'name')

console.log(n1.value);


function changeName() {
  name.value += '~'
  console.log(toRefs(person));
}

function changeAge() {
  age.value += 1

}


</script>

<style scoped>
.hello li {
  list-style-type: none;
}
</style>
